// javaScript for autoAgent_web
var ws;
var server_ip = window.location.host;
var radar_canvas, radar_ctx, radar_centerX, radar_centerY, radar_radius, radar_targets=[];
var atp_yaw=0, atp_pitch=0, atp_fire_state=false;
var itv_view_angle, ctv_view_angle, cur_track_tv, cur_h_view;
const max_range = 2000;


function setupWebSocket()
{
	if ("WebSocket" in window) {
		ws = new WebSocket('ws://'+server_ip+'/ws/video');
		ws.onopen = function(event) {
			console.log('on opened!');
		};
		ws.onmessage = function(event) {
			if (typeof (event.data) === 'string') {
				json_data_parse(event.data);
			} else {
			}
		};
		ws.onclose = function(event) {
			console.log('on closed!');
		};
		ws.onerror = function(error) {
			console.error('on WebSocket error:', error);
		};
	} else {
		alert("unsupported WebSocket!");
	}
}
function json_data_parse(json_str)
{
	var root_obj = JSON.parse(json_str);
	if (root_obj.type === "run_state") {
		if (undefined != root_obj.radar_obj) {
			var radar_obj = root_obj.radar_obj;
			radar_targets.length = 0;
			for (var i = 0; i < radar_obj.length; i++) {
				radar_targets.push({id: radar_obj[i].targetId, x: radar_centerX + Math.sin(Math.PI/180*radar_obj[i].aziAngle)*(radar_obj[i].distance*radar_radius/max_range), y: radar_centerY - Math.cos(Math.PI/180*radar_obj[i].aziAngle)*(radar_obj[i].distance*radar_radius/max_range)});
			};
		}
		if (undefined != root_obj.atp_obj) {
			var atp_obj = root_obj.atp_obj;
			atp_pitch = atp_obj.pitch;
			atp_yaw = atp_obj.yaw;
			itv_view_angle = atp_obj.itv_view_angle;
			ctv_view_angle = atp_obj.ctv_view_angle;
			atp_fire_state = atp_obj.is_fire;
			cur_track_tv = atp_obj.track_tv;
			if (cur_track_tv == "itv") {
				document.getElementById('js_itv_mode').style.color = '#45c000';
				document.getElementById('js_ctv_mode').style.color = '#AAAAAA';
				cur_h_view = itv_view_angle;
			} else if (cur_track_tv == "ctv") {
				document.getElementById('js_ctv_mode').style.color = '#45c000';
				document.getElementById('js_itv_mode').style.color = '#AAAAAA';
				cur_h_view = ctv_view_angle;
			} else {
				document.getElementById('js_ctv_mode').style.color = '#AAAAAA';
				document.getElementById('js_itv_mode').style.color = '#AAAAAA';
				cur_h_view = 0;
			};
		}
		if (undefined != root_obj.agent_obj) {
			var agent_obj = root_obj.agent_obj;
			agent_sm_state_update(agent_obj.sm_state);
		}
		if (undefined != root_obj.cv_obj) {
			cv_track_state_update(root_obj.cv_obj);
		}
	} else {
		console.log('未知type:', root_obj.type);
	}
}

function agent_sm_state_update(cur_state)
{
	document.getElementById('js_state_1').style.backgroundColor = '#AAAAAA';
	document.getElementById('js_state_2').style.backgroundColor = '#AAAAAA';
	document.getElementById('js_state_3').style.backgroundColor = '#AAAAAA';
	document.getElementById('js_state_4').style.backgroundColor = '#AAAAAA';
	document.getElementById('js_state_5').style.backgroundColor = '#AAAAAA';
	document.getElementById('js_state_'+cur_state).style.backgroundColor = '#4CAF50'
}
function cv_track_state_update(cv_obj)
{
	var itv_cv_state = cv_obj.itv_cv_state;
	document.getElementById('js_itv_mode').textContent = itv_cv_state.state;
	document.getElementById('js_val_itv_score').textContent = itv_cv_state.score;
	document.getElementById('js_val_itv_box').textContent = ("["+itv_cv_state.target.x+', '+itv_cv_state.target.y+', '+itv_cv_state.target.w+', '+itv_cv_state.target.h+"]");
	document.getElementById('js_val_itv_miss').textContent = ("[" + itv_cv_state.offset.x + ", " + itv_cv_state.offset.y + "]");
	var ctv_cv_state = cv_obj.ctv_cv_state;
	document.getElementById('js_ctv_mode').textContent = ctv_cv_state.state;
	document.getElementById('js_val_ctv_score').textContent = ctv_cv_state.score;
	document.getElementById('js_val_ctv_box').textContent = ("["+ctv_cv_state.target.x+', '+ctv_cv_state.target.y+', '+ctv_cv_state.target.w+', '+ctv_cv_state.target.h+"]");
	document.getElementById('js_val_ctv_miss').textContent = ("[" + ctv_cv_state.offset.x + ", " + ctv_cv_state.offset.y + "]");
	var ftv_cv_state = cv_obj.ftv_cv_state;
	document.getElementById('js_ftv_mode').textContent = ftv_cv_state.state;
	document.getElementById('js_val_ftv_score').textContent = ftv_cv_state.score;
	document.getElementById('js_val_ftv_box').textContent = ("["+ftv_cv_state.target.x+', '+ftv_cv_state.target.y+', '+ftv_cv_state.target.w+', '+ftv_cv_state.target.h+"]");
	document.getElementById('js_val_ftv_miss').textContent = ("[" + ftv_cv_state.offset.x + ", " + ftv_cv_state.offset.y + "]");
}

function radarCanvas_init()
{
	radar_canvas = document.getElementById('radarCanvas');
	radar_ctx = radar_canvas.getContext('2d');
	radar_centerX = radar_canvas.width / 2;
	radar_centerY = radar_canvas.height / 2;
	radar_radius = 300;

	radarCanvas_update();
}
function radarCanvas_update()
{
	// 清除画布
	radar_ctx.clearRect(0, 0, radar_canvas.width, radar_canvas.height);
	// 绘制雷达背景
	radar_ctx.strokeStyle = '#45c000';
	radar_ctx.fillStyle = '#45c000';
	radar_ctx.beginPath();
	radar_ctx.arc(radar_centerX, radar_centerY, radar_radius, 0, Math.PI*2);    //2km
	radar_ctx.fillText("2.0km", radar_centerX-100, 25);
	radar_ctx.stroke();
	radar_ctx.beginPath();
	radar_ctx.arc(radar_centerX, radar_centerY, radar_radius-50, 0, Math.PI*2); //1.6km
	radar_ctx.fillText("1.6km", radar_centerX+100, 70);
	radar_ctx.stroke();
	radar_ctx.beginPath();
	radar_ctx.arc(radar_centerX, radar_centerY, radar_radius-100, 0, Math.PI*2); //1.2km
	radar_ctx.fillText("1.2km", radar_centerX-100, 130);
	radar_ctx.stroke();
	radar_ctx.beginPath();
	radar_ctx.arc(radar_centerX, radar_centerY, radar_radius-150, 0, Math.PI*2); //0.8km
	radar_ctx.fillText("0.8km", radar_centerX+100, 190);
	radar_ctx.stroke();
	radar_ctx.beginPath();
	radar_ctx.arc(radar_centerX, radar_centerY, radar_radius-200, 0, Math.PI*2); //0.4km
	radar_ctx.fillText("0.4km", radar_centerX-100, 240);
	radar_ctx.stroke();
	//标度
	radar_ctx.beginPath(); //0
	radar_ctx.moveTo(radar_centerX, 0); radar_ctx.lineTo(radar_centerX, 20);
	radar_ctx.fillText("0°", radar_centerX+5, 15);
	radar_ctx.stroke();
	radar_ctx.beginPath(); //45
	radar_ctx.moveTo(radar_radius+radar_radius*Math.cos(Math.PI/4), radar_radius-radar_radius*Math.sin(Math.PI/4));
	radar_ctx.lineTo(radar_radius+(radar_radius-20)*Math.cos(Math.PI/4), radar_radius-(radar_radius-20)*Math.sin(Math.PI/4));
	radar_ctx.stroke();
	radar_ctx.beginPath(); //90
	radar_ctx.moveTo(radar_centerX*2, radar_centerY); radar_ctx.lineTo(radar_centerX*2-20, radar_centerY);
	radar_ctx.fillText("90°", radar_centerX*2-20, radar_centerY+10);
	radar_ctx.stroke();
	radar_ctx.beginPath(); //125
	radar_ctx.moveTo(radar_radius+radar_radius*Math.cos(Math.PI/4), radar_radius+radar_radius*Math.sin(Math.PI/4));
	radar_ctx.lineTo(radar_radius+(radar_radius-20)*Math.cos(Math.PI/4), radar_radius+(radar_radius-20)*Math.sin(Math.PI/4));
	radar_ctx.stroke();
	radar_ctx.beginPath(); //180
	radar_ctx.moveTo(radar_centerX, radar_centerY*2); radar_ctx.lineTo(radar_centerX, radar_centerY*2-20);
	radar_ctx.fillText("180°", radar_centerX-24, radar_centerY*2-5);
	radar_ctx.stroke();
	radar_ctx.beginPath(); //225
	radar_ctx.moveTo(radar_radius-radar_radius*Math.cos(Math.PI/4), radar_radius+radar_radius*Math.sin(Math.PI/4));
	radar_ctx.lineTo(radar_radius-(radar_radius-20)*Math.cos(Math.PI/4), radar_radius+(radar_radius-20)*Math.sin(Math.PI/4));
	radar_ctx.stroke();
	radar_ctx.beginPath(); //270
	radar_ctx.moveTo(0, radar_centerY); radar_ctx.lineTo(20, radar_centerY);
	radar_ctx.fillText("270°", 5, radar_centerY-5);
	radar_ctx.stroke();
	radar_ctx.beginPath(); //315
	radar_ctx.moveTo(radar_radius-radar_radius*Math.cos(Math.PI/4), radar_radius-radar_radius*Math.sin(Math.PI/4));
	radar_ctx.lineTo(radar_radius-(radar_radius-20)*Math.cos(Math.PI/4), radar_radius-(radar_radius-20)*Math.sin(Math.PI/4));
	radar_ctx.stroke();
	// 绘制目标点
	radar_ctx.beginPath();
	radar_targets.forEach(target => {
		radar_ctx.moveTo(target.x, target.y);
		radar_ctx.fillStyle = '#f00';
		radar_ctx.arc(target.x, target.y, 5, 0, Math.PI * 2);
		radar_ctx.fillText(target.id, target.x-2, target.y-6);
		radar_ctx.fill();
	});
	// 绘制瞄准线
	radar_ctx.beginPath();
	radar_ctx.strokeStyle = '#0ff';
	radar_ctx.fillStyle = '#0ff';
	radar_ctx.arc(radar_centerX, radar_centerY, 5, 0, Math.PI*2);
	radar_ctx.moveTo(radar_centerX+20, radar_centerY);
	radar_ctx.lineTo(radar_centerX, radar_centerY);
	radar_ctx.lineTo(radar_centerX+20, radar_centerY-20);
	radar_ctx.fillText(atp_pitch+"°", radar_centerX+14, radar_centerY-5);
	radar_ctx.stroke();
	radar_ctx.beginPath();
	radar_ctx.moveTo(radar_centerX+radar_radius*Math.sin((atp_yaw-cur_h_view)*Math.PI/180), radar_centerY-radar_radius*Math.cos((atp_yaw-cur_h_view)*Math.PI/180));
	radar_ctx.lineTo(radar_centerX, radar_centerY);
	radar_ctx.lineTo(radar_centerX+radar_radius*Math.sin((atp_yaw+cur_h_view)*Math.PI/180), radar_centerY-radar_radius*Math.cos((atp_yaw+cur_h_view)*Math.PI/180));
	radar_ctx.globalAlpha = 0.3;
	radar_ctx.fill();
	radar_ctx.globalAlpha = 1.0;
	//开火指示
	if (atp_fire_state) {
		radar_ctx.beginPath();
		radar_ctx.strokeStyle = '#f50';
		radar_ctx.moveTo(radar_centerX, radar_centerY);
		radar_ctx.lineTo(radar_centerX+radar_radius*Math.sin(atp_yaw*Math.PI/180), radar_centerY+radar_radius*Math.cos(atp_yaw*Math.PI/180));
		radar_ctx.stroke();
	};

	requestAnimationFrame(radarCanvas_update);
}

function on_jc_auto_agent_en()
{
	if (ws.readyState === WebSocket.OPEN) {
		var json_obj = {
			type: "top_ctrl",
			cmd: "autoAgent_en",
			autoAgent_en: (document.getElementById('jc_auto_agent_switch').checked) ? true:false,
		}
		var json_str = JSON.stringify(json_obj);
		ws.send(json_str);
	}
}

function on_jc_fire_mode(event)
{
	if (ws.readyState === WebSocket.OPEN) {
		var json_obj = {
			type: "fire_mode",
			cmd: event.target.id,
		}
		var json_str = JSON.stringify(json_obj);
		ws.send(json_str);
	}

	document.getElementById('jc_fire_auto').style.backgroundColor     = '#4CAF50';
	document.getElementById('jc_fire_request').style.backgroundColor  = '#4CAF50';
	document.getElementById('jc_fire_simulate').style.backgroundColor = '#4CAF50';
	document.getElementById('jc_fire_null').style.backgroundColor     = '#4CAF50';
	event.target.style.backgroundColor = '#AAAAAA'
}

function on_jc_wind_test()
{
	if (ws.readyState === WebSocket.OPEN) {
		var json_obj = {
			type: "test_bt",
			cmd: "wind_test",
		}
		var json_str = JSON.stringify(json_obj);
		ws.send(json_str);
	}
}


function on_page_load()
{
	setupWebSocket();
	radarCanvas_init();
}

